<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <el-table :data="tableData" style="width: 100%">
			        <el-table-column label="ID" prop="id" width='180'>
			        </el-table-column>
              <el-table-column label="ID" prop="id" width='180'>
			        </el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="detail(scope.$index, scope.row)">详情</el-button>
                    <el-button
                    size="mini"
                    type="success"
                    @click="detail(scope.$index, scope.row)">审核</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="detail(scope.$index, scope.row)">编辑</el-button>     
                </template>
              </el-table-column>
			      </el-table>
            <el-dialog title="详情" :visible.sync="orderDetailWindow"> 
              <el-row :gutter="20"  class="orderDetail">
                <el-col :span="5"><div><span>支付方式：{{orderDetail.payType}}</span></div></el-col>
                <el-col :span="5">
                  <div>
                    <span>退款相关参数：</span>
                    <span v-if="orderDetail.isRefunded">是</span>
                    <span v-else>否</span>
                  </div>
                </el-col>
                <el-col :span="5"><div><span>退款金额：</span></div></el-col>
                <el-col :span="9"><div><span>服务时间：</span></div></el-col>
              </el-row>             
              <el-row :gutter="20" class="orderDetail">              
                <el-col :span="5"><div><span>客户：</span></div></el-col>
                <el-col :span="5"><div></div></el-col>
                <el-col :span="5"><div><span>ID：</span></div></el-col>
                <el-col :span="5"><div><span>手机：</span></div></el-col>
              </el-row>
              <el-row :gutter="20" class="orderDetail" >
                <el-col :span="24">
                  <div>
                    <el-button 
                      size="mini"
                      type="danger"
                      @click="offOrder()">审核
                    </el-button> 
                    <el-button 
                      size="mini"
                      type="danger"
                      @click="offWindow()">关闭窗口
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </el-dialog>
            <el-dialog title="审核" :visible.sync="offOrderwindow" >
                <el-radio-group v-model="jieguo">
                  <el-radio :label="0">通过</el-radio>
                  <el-radio :label="1">不通过</el-radio>
                </el-radio-group>
                <div style="width:200px;margin:0 auto">
                    <el-button type="primary" @click="MakeSureOffOrder(id)">提交</el-button>
                    <el-button @click="offOrderwindow=false">退出</el-button>
                </div> 
            </el-dialog>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// 引入组件
import headTop from "../components/headTop";
import {
  getUsers,
  getUser,
  checkUser,
} from "@/api/getData";
export default {
  data() {
    return {
      orderDetail: {},
      orderDetailWindow: false,
      offOrderwindow: false,
      tableData: [{id:1},{id:2}],
      orderId: "",
      jieguo:"",
      id: "",
      name: "",
      currentRow: null,
      offset: 0,
      limit: 10,
      count1: 10000,
      count: 1000000,
      currentPage: 1,
      dialogFormVisible1: false,
      form: {},
      offOrderForm: {},
      formLabelWidth: "120px",
    };
  },
  // 声明组件
  components: {
    headTop
  },
  // 进入页面初始化数据
  created() {
    // this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      try {
        this.getUsersList();
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },
    // 订单每页数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      this.initData();
    },
    
    // 获取列表
    async getUsersList() {
      const res = await getUsers({
        page: this.offset,
        pagesize: this.limit,
        uid: sessionStorage.getItem('uid'),
        token:sessionStorage.getItem('token')
      });
      if (res.status == 200) {
        this.tableData = res.data;
      } else {
        this.$message({
          type: "error",
          message: "加载失败"
        });
      }
    },
   
    // 获取详情
    async detail(index, row) {
      this.orderDetailWindow = true;
      this.userId  = row.id;
      var that = this;
      const res = await getUser(that.userId,{userId:that.userId,uid: sessionStorage.getItem('uid'),
        token:sessionStorage.getItem('token')});
      if (res.status == 200) {
        this.orderDetail = res.data;
      }
    },
    // 取消订单
    async offOrder() {
      this.offOrderwindow = true;
    },
    // 确认取消订单
    async MakeSureOffOrder() {
      if (!this.jieguo=="" ) {
        var data ={};
          data.res= this.jieguo;
					data.uid = sessionStorage.getItem('uid');
					data.token = sessionStorage.getItem('token');
        const res = await checkUser(this.userId, );
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "提交成功"
          });
          this.offOrderwindow = false;
          this.offWindow();
        } else {
          this.$message({
            type: "error",
            message: "失败"
          });
        }
      }else{
        this.$message({
          type: "error",
          message: "请选择"
        });
      }
    },
    async offWindow() {
      this.orderDetailWindow = false;
      this.initData();
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == "/orderList") {
        this.initData();
      }
    },
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.chooseYet {
  height: 40px;
  line-height: 40px;
}
.masterImg {
  width: 50px;
  height: 50px;
}
.orderDetail {
  margin-bottom: 20px;
}
.order-query {
  padding: 20px;
  width: 100%;
  .order-search {
    width: 100px;
    padding: 0;
    height: 36px;
  }
  .input-with-select {
    width: 80%;
  }
  .order-select {
    width: 200px;
    .avatarImage {
      width: 5px;
      height: 5px;
    }
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input-group__append {
  padding: 0;
}
.table_container {
  padding: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
